<template>
        <v-row>
              <!-- 饼图卡片 -->
          <v-col cols="5" style="background-color: #333; padding: 0 ;">
            <v-card
                class="mb-4"
                color="#424242">
<!--            theme="dark"-->

                <v-card-title></v-card-title>
                <v-card-text >
                  <div ref="pieChart" style="width: 100%; height: 400px;"></div>
                </v-card-text>
              </v-card>
          </v-col>

          <!-- 折线图卡片 -->
          <v-col cols="7" style="background-color: #333; padding: 0 10px;">
            <v-card
                class="mb-4"
                color="#424242">
              <v-card-title></v-card-title>
            <v-card-text>
              <div ref="lineChart" style="width: 600px; height: 400px;"></div>
            </v-card-text>
          </v-card>
          </v-col>
        </v-row>
</template>

<script>
import * as echarts from 'echarts';
import { ReadYearlyPosFrequencyHdfs, ReadPieChartResultsHdfs } from '@/api/job';

export default {
  name: 'BaseLineChart',
  data() {
    return {
      pieChart: null,
      lineChart: null,
      pieData: [],
      lineData: [],
      chartHeight: '400px' // 默认高度
    };
  },
  mounted() {
    this.fetchData();
  },
  beforeDestroy() {
    if (this.pieChart) {
      this.pieChart.dispose();
    }
    if (this.lineChart) {
      this.lineChart.dispose();
    }
  },
  methods: {
    async fetchData() {
      try {
        // 获取饼图数据
        const pieResponse = await ReadPieChartResultsHdfs();
        console.log('Pie chart response:', pieResponse); // 调试输出
        if (pieResponse.data.code === 200) {
          this.pieData = pieResponse.data.data.map(item => ({
            name: item.POS,
            value: item.Count,
            percentage: item.Percentage
          }));
          this.initPieChart();
        } else {
          console.error('获取饼图数据失败:', pieResponse.data.msg);
        }

        // 获取折线图数据
        const lineResponse = await ReadYearlyPosFrequencyHdfs();
        console.log('Line chart response:', lineResponse); // 调试输出
        if (lineResponse.data.code === 200) {
          this.lineData = lineResponse.data.data;
          this.initLineChart();
        } else {
          console.error('获取折线图数据失败:', lineResponse.data.msg);
        }
      } catch (error) {
        console.error('获取数据时发生错误:', error);
      }
    },
    initPieChart() {
      this.pieChart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          text: '总词性分布',
          left: 'center',
          textStyle: {
            color: 'white' // 设置标题颜色为白色
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          fontSize: 18 // 设置提示框文字大小
        },
        series: [
          {
            name: '词性分布',
            type: 'pie',
            radius: ['30%', '60%'], // 可调节内外半径
            center: ['50%', '55%'],  // 垂直居中微调
            avoidLabelOverlap: false, // 允许标签重叠
            label: {
              show: true,
              position: 'outside', // 将标签置于饼图外部
              formatter: '{b}: {d}%', // 标签格式
              color: 'white' ,// 设置标签文字颜色为白色
              fontSize: 14 // 设置提示框文字大小
            },
            labelLine: {
              show: true,
              length: 5, // 调整引导线长度
              length2: 5 // 调整引导线第二段长度
            },
            // data: this.pieData,
            data: [
              {
                name: '名词',
                value: 41613,
                percentage: 54.49,
                itemStyle: {
                  color: '#CDB5CD' // 更改名词的色块颜色
                }
              },
              {
                name: '动词',
                value: 18923,
                percentage: 24.78,
                itemStyle: {
                  color: '#FFAEB9' // 更改动词的色块颜色
                }
              },
              {
                name: '形容词',
                value: 11118,
                percentage: 14.56,
                itemStyle: {
                  color: '#EED5D2' // 更改形容词的色块颜色
                }
              },
              {
                name: '副词',
                value: 4709,
                percentage: 6.17,
                itemStyle: {
                  color: '#FFF8DC' // 更改副词的色块颜色
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            // label: {
            //   formatter: '{b}: {d}%'
            // }
          }
        ]
      };
      this.pieChart.setOption(option);
    },
    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart);
      const years = this.lineData.map(item => item.year);
      const nounData = this.lineData.map(item => item.noun);
      const verbData = this.lineData.map(item => item.verb);
      const adjectiveData = this.lineData.map(item => item.adjective);
      const adverbData = this.lineData.map(item => item.adverb);

      const option = {
        title: {
          text: '历年词频变化',
          textStyle: {
            color: 'white' // 设置标题颜色为白色
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            const year = params[0].name;
            let tooltip = `${year}年<br/>`;
            params.forEach(param => {
              tooltip += `${param.seriesName}: ${param.value}<br/>`;
            });
            return tooltip;
          }
        },
        legend: {
          data: ['名词', '动词', '形容词', '副词'],
          textStyle: {
            color: 'white' // 设置图例文字颜色为白色
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: years,
          axisLine: {
            lineStyle: {
              color: 'white' // 设置坐标轴线条颜色为白色
            }
          },
          axisLabel: {
            color: 'white' // 设置坐标轴标签文字颜色为白色
          }
        },
        yAxis: {
          type: 'value',
          name: '频次',
          axisLine: {
            lineStyle: {
              color: 'white' // 设置坐标轴线条颜色为白色
            }
          },
          axisLabel: {
            color: 'white' // 设置坐标轴标签文字颜色为白色
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)' // 设置网格线颜色为浅灰色
            }
          }
        },
        series: [
          {
            name: '名词',
            type: 'line',
            data: nounData,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#E0EEE0'
            }
          },
          {
            name: '动词',
            type: 'line',
            data: verbData,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#f6c23e'
            }
          },
          {
            name: '形容词',
            type: 'line',
            data: adjectiveData,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#36b9cc'
            }
          },
          {
            name: '副词',
            type: 'line',
            data: adverbData,
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              color: '#8968CD'
            }
          }
        ]
      };
      this.lineChart.setOption(option);
    }
  }
};
</script>

<style>
.v-card {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}
</style>

